<?php
include 'data.php';
include 'head.php';
?>
<table>
    <tbody>
        <?php
        foreach ($array as $key => $a_value) {
            ?>
            <tr>
                <td class="border show-question" id="<?php echo $key ?>">
                    <?php echo $key ?>
                    <span class="hidden question"><?= $a_value['question'] ?></span>
                    <span class="hidden answer_full"><?= $a_value['answer_full'] ?></span>
                    <span class="hidden second"><?= $a_value['second'] ?></span>
                </td>
                <td></td>
                <?php
                $total = 0;
                foreach ($a_value['answer'] as $column_no => $value) {
                    $class = 'text-hide answer';

                    if ($value) {
                        $total++;
                        if ($column_no == $special_column) {
                            $class .= ' border-special';

                            if ($key == count($array)) {
                                $class .= ' show-bigquestion';
                            }
                        } else {
                            $class .= ' border';
                        }
                    }
                    ?>
                    <td class="<?= $class ?>"><?php echo $value ?></td>
                    <?php
                }
                ?>
                <td class="cell-size"><?= $total ?> ô</td>
                <td class="border score show-question" id="<?php echo $key ?>">
                    <?php echo $a_value['score'] ?> Điểm
                    <span class="hidden question"><?= $a_value['question'] ?></span>
                    <span class="hidden answer_full"><?= $a_value['answer_full'] ?></span>
                    <span class="hidden second"><?= $a_value['second'] ?></span>
                </td>
            </tr>
            <?php
        }
        ?>
    </tbody>
</table>

<audio id="ticking" src="../ticking-clock.mp3" loop="loop"></audio>
<audio id="end-time" src="../end-time.wav" ></audio>
<audio id="show-result" src="../show-result.wav" ></audio>

<div id="question-dialog" title="Câu Hỏi">
    <p class="question"></p>
    <p class="counter"></p>
    <p class="answer_full"></p>
</div>
<p id="demo"></p>
<script type="text/javascript">
    $(function() {
        /*
         * Init Values
         */
        var $td_previous_question;
        var $timer;
        var $big_answer = '<?= $big_answer ?>';
        var _second = 10;    
        var _counter = _second;    
            
        $( "#question-dialog" ).dialog({
            autoOpen: false,
            position: ['auto', 50],
            modal: true,
            width: 1000,
            height: 'auto',
            buttons: {
                "Bắt Đầu": function() {
                    $sound_effect.play();
                },
                "Hết Giờ": function() {
                    $sound_effect.end_time();
                },
                "Đáp Án": function() {
                    $sound_effect.show_result();
                        
                    $(this)
                    .find('p.counter').hide().end()
                    .find('p.answer_full').text($td_previous_question.find('span.answer_full').text()).show();
                        
                    $td_previous_question.parent()
                    .children('.show-question').addClass('chosen').end()
                    .children('.text-hide').removeClass('text-hide');
                }
            },
            beforeClose: function( event, ui ) {
                $sound_effect.pause();
                $(this).find('p.answer_full').hide();
            }
        });
        
        $sound_effect = {
            play : function () {
                $sound_effect.pause();
                $sound_effect.show_timer();
                $('audio#ticking').get(0).play();
            },
            pause : function () {
                $sound_effect.stop_timer();
                $('audio#ticking').get(0).pause();
                $('audio#ticking').get(0).currentTime = 0;
            },
            end_time : function () {
                $sound_effect.pause();
                $('audio#end-time').get(0).play();
            },
            show_result : function () {
                $sound_effect.pause();
                $('audio#show-result').get(0).play();
            },
            show_timer : function () {
                if ($timer === undefined) { $sound_effect.stop_timer(); }
                $timer = setInterval( $sound_effect.count_time, 1000);
            },
            count_time : function () {
                _counter = _counter - 1;
                $('p.counter').text(_counter + ' giây');
                if (_counter <= 0) { $sound_effect.end_time(); }
            },
            stop_timer : function () {
                _counter = _second;
                clearInterval($timer);
            }
        }
        
        $(window).resize(function(){

            $('table').css({
                position:'absolute',
                left    : 0,
                top     : 10
            });

            $('table').css({
                left    : ($(window).width () - $('table').outerWidth ())/2
            });
        });

        $(window).resize();
        /*
         * End - Init Values
         */
        
        /*
         * Execute-Script
         */
        $('.show-bigquestion').click(function() {
            
            $sound_effect.show_result();
            
            $( "#question-dialog" )
            .find('p.counter').hide().end()
            .find('p.answer_full').text($big_answer).show().end()
            .find('p.question').hide().end()
            .dialog('option', 'title' , 'Đáp Án Hàng Dọc' )
            .dialog('open');
                
            $('.border-special').removeClass('text-hide');
        });
            
        $('.show-question').bind({
            click : function () {
                question = $(this).find('span.question').text();
//                _second = $(this).find('span.second').text();
                
                $td_previous_question = $(this);
            
                $sound_effect.show_result();
                
                $( "#question-dialog" )
                .find('p.counter').text(_second + ' giây').show().end()
                .find('p.answer_full').text('').show().end()
                .find('p.question').text(question).show().end()
                .dialog('option', 'title' , 'Câu Hỏi ' +  $(this).attr('id') )
                .dialog('open');
            }
        });
    });
</script>
<?php
include 'tail.php';
?>